<template>
	<view>
		<!--医美专区列表 -->
		
		<view class="item" 
		v-for="(item,index) in dataList" 
		:key="index"
		@tap="onDetails(item.id, item.title)"
		>
			<view class="leftbox">
				<view class="title1 text-cut-2">{{item.title||''}}</view>
				<view class="title2 text-cut">{{item.description||''}}</view>
			</view>
			
			<view class="position-relative">
				<image 
				:src="$wanlshop.oss(item.image, 125, 125)"
				class="articleImage"
				mode="aspectFill"
				></image>
				
				<image src="/static/images/play.png" class="playImage"></image>
			</view>
		</view>
		
		<uni-load-more :status="status" :content-text="contentText" />
		
		
	<view v-if="videoPlay">
	    <video
	         controls
	         id="fullVideo"
	         :src="videoUrl"
	         @fullscreenchange="screenChange"
	         :vslide-gesture-in-fullscreen="false"
			class="fullVideo"
	      ></video>
	</view>
		
		
	</view>
	
</template>

<script>
import config from '../../common/config/config';

export default {
	data() {
		return { 
			videoUrl:'',
            videoPlay:false,
			oss: config.cdnurl,
			category_id:0,
			
			dataList: [],
			reload: false, //判断是否上拉
			total: 0, //数据量
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'more',
			contentText: {
				contentdown: ' ',
				contentrefresh: '加载中',
				contentnomore: ''
			}
		}
	},
	onLoad(option) {
		this.category_id = option.category_id;
		uni.setNavigationBarTitle({
			title: option.title,
		})
		
		this.loadData();
	},
	onPullDownRefresh() {
		this.current_page = 1;
		this.reload = true;
		this.loadData();
	},
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.reload = false;
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.loadData();
		}
	},
	methods: {
		screenChange(e) {
		    let fullScreen = e.detail.fullScreen;
		    if (!fullScreen) {
		      this.videoPlay = false;
		    }
		},
		screenVideo(url, width, height){
			this.videoUrl = url;
			this.videoPlay = true;
		    let ratio = width > height ? 90 : 0;
		    this.videoContext = uni.createVideoContext("fullVideo", this);
		    this.videoContext.requestFullScreen({ direction: ratio });  
		    this.videoContext.play();
		},
		async loadData() {
			await uni.request({
				url: '/wanlshop/article/getList',
				method: 'POST',
				data: {
					type: this.category_id,
					page: this.current_page
				},
				success: res => {
					uni.stopPullDownRefresh();
					this.dataList = this.reload ? res.data.data : this.dataList.concat(res.data.data);//数据 追加
					this.total = res.data.total; //数据量
					this.current_page = res.data.current_page; //当前页码
					this.last_page = res.data.last_page; //总页码
					this.status = res.data.total == 0 ? 'noMore' : 'more';
				}
			});
		}
	}
}	
</script>

<style lang="scss" scoped>
.item{
	padding: 32rpx 25rpx;
	display: flex;
	justify-content: space-between;
	border-bottom: 1rpx solid #EBEBEB;
	background-color: #FFFFFF;
}	

.title1{
	width: 428rpx;
	font-size: 32rpx;
	font-family: PingFang SC;
	font-weight: 700;
	color: #292929;
	line-height: 48rpx;
}

.title2{
	width: 428rpx;
	font-size: 24rpx;
	font-family: PingFang SC;
	font-weight: 400;
	color: #999999;
	margin-top: 39rpx;
}

.articleImage{
	width: 220rpx;
	height: 140rpx;
	background: #FFFFFF;
	border-radius: 20rpx;
}

.playImage{
	width: 64rpx;
	height: 64rpx;
	position: absolute;
	top: 44rpx;
	left: 82rpx;
}

.fullVideo{
	width: 100%;
	height: 100vh;
	position: absolute;
	top: 0rpx;
	left: 0rpx;
}
</style>